<template>
  <view class="task-list">
    <view class="header">
      <text>今日未完成打卡任务</text>
      <text class="all-task-list-btn" @tap="navigateToAllList"
        >所有打卡任务</text
      >
    </view>
    <view class="unfinished-task-list">
      <view
        v-for="taskRcord in unfinishedTaskRecordList"
        :key="taskRcord.id"
        class="task-card"
        @tap="showSignTaskDialog(taskRcord)"
      >
        <view class="sub-title"></view>
        <view class="content-wrap">
          <text class="title">{{ taskRcord.task.title }}</text>
          <text class="point">{{ taskRcord.task.score }}积分</text>
        </view>
        <image class="taskImage" :src="taskRcord.task.imageUrl || testImage" />
      </view>
    </view>
    <!-- TODO: 待确认此模块 -->
    <view v-if="showUnfinishedOnceTaskList" class="header"
      >未完成一次性任务</view
    >
    <view v-if="showUnfinishedOnceTaskList" class="unfinished-once-task-list">
      <view
        v-for="(task, index) in unfinishedOnceTaskList"
        :key="index"
        class="task-card"
        @tap="fillUnfinishedOnceTask()"
      >
        <view class="sub-title"></view>
        <view class="content-wrap">
          <text class="title">{{ task.title }}</text>
          <text class="point">{{ task.point }}积分</text>
        </view>
        <image class="taskImage" :src="task.imageUrl || testImage" />
      </view>
    </view>
    <view class="header">
      <text>今日已完成打卡任务</text>
      <text
        >{{ finishedTaskRecordList.length }}/{{
          todayTaskRecordList.length
        }}</text
      >
    </view>
    <view class="finished-task-list">
      <view
        v-for="taskRcord in finishedTaskRecordList"
        :key="taskRcord.id"
        class="finished-task"
      >
        <text>{{ taskRcord.task.title }}</text>
        <view class="at-icon at-icon-check-circle" />
      </view>
    </view>
    <!-- TODO: 打卡任务内容组件抽取 -->
    <at-modal :isOpened="isOpenDialog" :onClose="handleClose">
      <at-modal-content>
        <view v-if="taskDialogData" class="task-dialog-content">
          <text class="title">{{ taskDialogData.task.title }}</text>
          <text class="point">+{{ taskDialogData.task.score }}积分</text>
          <image
            v-if="taskDialogData"
            class="task-modal-image"
            :src="taskDialogData.task.imageUrl || testImage"
          />
        </view>
      </at-modal-content>
      <at-modal-action>
        <button
          v-if="taskDialogData"
          class="complete-btn"
          @tap="completeTask(taskDialogData.id)"
        >
          我做到了
        </button>
      </at-modal-action>
    </at-modal>
  </view>
</template>

<script lang="ts">
import "./index.less";
import Taro from "@tarojs/taro";
import { AtModal, AtModalContent, AtModalAction } from "taro-ui-vue";
import {
  getDailyTaskList,
  DailyTaskItem,
  checkMarkTask,
} from "../../../services/task-service";
import { completedTodayTests } from "../../../services/healthy-test-service";
import testImage from "../../../assets/images/tasktest.jpg";

export default {
  components: {
    atModal: AtModal,
    atModalContent: AtModalContent,
    atModalAction: AtModalAction,
  },
  data() {
    return {
      unfinishedTaskRecordList: [],
      unfinishedOnceTaskList: [
        {
          point: 40,
          title: "健康自测",
          info: "5-10分钟问卷",
        },
      ],
      finishedTaskRecordList: [],
      todayTaskRecordList: [],
      taskDialogData: null,
      isOpenDialog: false,
      testImage,
    };
  },
  methods: {
    async getTodayTaskList() {
      this.todayTaskRecordList = await getDailyTaskList();
      this.groupTaskByFinished(this.todayTaskRecordList);
    },
    groupTaskByFinished(todayTaskRecordList: DailyTaskItem[]) {
      this.finishedTaskRecordList = todayTaskRecordList.filter(
        (taskRecord) => taskRecord.finished
      );
      this.unfinishedTaskRecordList = todayTaskRecordList.filter(
        (taskRecord) => !taskRecord.finished
      );
    },
    showSignTaskDialog(taskRcord) {
      this.taskDialogData = taskRcord;
      this.isOpenDialog = true;
    },
    fillUnfinishedOnceTask() {
      // TODO：暂时写死，跳转到健康自测页面
      Taro.navigateTo({
        url: "/pages/user-info/index",
      });
    },
    async completeTask(taskRecordId: number) {
      const res = await checkMarkTask(taskRecordId);
      if (res.data.code === "success") {
        this.isOpenDialog = false;
        this.getTodayTaskList();
      }
    },
    navigateToAllList() {
      Taro.navigateTo({
        url: "/pages/tasks/list/index",
      });
    },
    handleClose() {
      this.isOpenDialog = false;
    },
    async checkCompletedTodayHealthyTest() {
      const res = await completedTodayTests();
      return res.data.data.isCompletedToday;
    },
  },
  computed: {
    showUnfinishedOnceTaskList() {
      return this.unfinishedOnceTaskList.length > 0;
    },
  },
  async onShow() {
    this.getTodayTaskList();

    // TODO：一次性未完成任务暂时只有健康自测，后面有其他模块，再对这块逻辑进行优化
    const isCompletedTodayHealthyTest =
      await this.checkCompletedTodayHealthyTest();
    if (isCompletedTodayHealthyTest) {
      this.unfinishedOnceTaskList = [];
    }
  },
};
</script>
